<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>输入框组</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	</head>
	<body>
		<!--
        	作者：赵星宇
        	时间：2019-07-26
        	描述：学习使用输入框组
        	避免使用select
        -->
        <div class="container">
        	<div class="input-group input-group-lg">
        		<span class="input-group-addon ">@</span>
        		<input type="text" class="form-control" placeholder="UserName" />
        	</div>
        	
        	<div class="input-group">
        		<input type="text" class="form-control" placeholder="Password" />
        		<span class="input-group-addon">@</span>
        	</div>
        	
        	<div class="input-group input-group-sm">
        		<span class="input-group-addon">$</span>
        		<input type="text" class="form-control" placeholder="Email" />
        		<span class="input-group-addon">.00</span>
        	</div>
        	
        	<!--前面的附加内容变为单选多选框-->
	        <div class="row">
	        	<div class="col-lg-6">
	        		<div class="input-group">
	        			<span class="input-group-addon">
	        				<input type="checkbox" />
	        			</span>
	        			<input type="text" class="form-control" placeholder="UserName" />
	        		</div>
	        	</div>
        	</div>
        	
        	<!--前面变成按钮-->
        	<div class="row">
	        	<div class="col-lg-6">
	        		<div class="input-group">
	        			<span class="input-group-btn">
	        				<button type="button" class="btn btn-info">Go!</button>
	        			</span>
	        			<input type="text" class="form-control" placeholder="UserName" />
	        		</div>
	        	</div>
	        	<div class="col-lg-6">
	        		<div class="input-group">
	        			<div class="input-group-btn">
	        				<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
	        					下拉菜单
	        				    <span class="caret"></span>
	        				</button>
	        				<ul class="dropdown-menu" role="menu">
	        					<li><a href="#">hello</a></li>
	        					<li><a href="#">hello</a></li>
	        					<li><a href="#">hello</a></li>
	        				</ul>
	        			</div>
	        			
	        			<input type="text" class="form-control" placeholder="UserName" />
	        		</div>
	        	</div>
        	</div>
        </div>
        
    <script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
